CSS : Exercice sur la mise en page simple

1. Création d'une Page de Profil

   • Créez un fichier HTML nommé profilNomDeLaPersonne.html.
   • À l'intérieur de ce fichier, créez une structure de base pour une page de profil avec un en-tête, une section de contenu et un pied de page. Utilisez comme sujet une personne en rapport avec les sujets que vous avez abordé lors des exercices précédents. Si vous avez par exemple choisi La chanson française, vous pouvez donc créer une page sur Johnny Halliday !
2. Mise en Page de l'En-Tête

   • À l'intérieur de l'en-tête, ajoutez un titre (par exemple, Profil de Johnny Halliday) avec une mise en page centrée.
   • Personnalisez l'arrière-plan de l'en-tête avec une couleur de fond de votre choix.
   • Appliquez une bordure en bas de l'en-tête pour séparer l'en-tête du contenu.
3. Mise en Page de la Section de Contenu

   • Dans la section de contenu, créez un paragraphe de texte de présentation.
   • Appliquez une marge extérieure (margin) pour espacer le contenu du bord de la fenêtre du navigateur.
   • Utilisez une marge intérieure (padding) pour ajouter de l'espace à l'intérieur de la section de contenu.
4. Positionnement d'une Image de Profil

   • Ajoutez une image de profil (par exemple, Une photo de tonton Johnny) à côté du paragraphe de présentation.
   • Utilisez le positionnement relatif pour ajuster la position de l'image par rapport au texte.
   • Appliquez une bordure autour de l'image de profil.
5. Création du Pied de Page

   • Dans le pied de page, ajoutez des informations de contact telles que votre adresse e-mail.
   • Utilisez le positionnement absolu pour aligner le pied de page en bas de la page, même si le contenu n'est pas assez long.
   • Appliquez une couleur de fond au pied de page.

• Utilisez des fichiers CSS externes pour appliquer les styles à votre page HTML.
• N'hésitez pas à expérimenter avec différentes couleurs, tailles de police, marges, paddings, bordures, etc., pour personnaliser la mise en page selon vos préférences.
• Assurez-vous que votre mise en page est responsive et s'adapte aux différentes tailles d'écran.

Cet exercice permettra aux étudiants de consolider leurs connaissances en CSS et de créer une mise en page web simple mais élégante en utilisant les concepts que nous avons couverts. Il encourage également la créativité en matière de design.

#cours #blindcode #css #programmation #frontend

créé le 2023-09-01 à 11:20